<template>
  <div :class="['log-panel-item','flex',`log-panel-item--${type}`]">
    <div class="log-panel-item__left flex justify-center items-center">
      <i :class="['cuifont',icon]"></i>
    </div>

    <div class="log-panel-item__right flex flex-col items-start justify-between">
      <span class="log-panel-item__right--name">{{name}}</span>
      <span class="log-panel-item__right--total">{{total}}</span>
    </div>

  </div>
</template>

<script>
export default {
  name: 'LogPanelItem',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    name: {
      type: String,
      default: 'log'
    },
    total: {
      type: [Number, String],
      default: 0
    }
  },

  computed: {
    icon () {
      if (this.type === 'primary') {
        return 'icon_comment_warning'
      }
      if (this.type === 'success') {
        return 'icon_comment_check'
      }
      if (this.type === 'error') {
        return 'icon_comment_error'
      }

      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
.log-panel-item {
  width: 100%;
  height: 64px;
  padding: 12px;
  border-radius: 4px;
  margin-right: 14px;
  &:last-child {
    margin-right: 0;
  }
  &--primary {
    background-color: #e6f7ff;
    .log-panel-item__left {
      background-color: #bae7ff;
    }
  }
  &--success {
    background-color: #f6ffed;
    .log-panel-item__left {
      background-color: #d9f7be;
    }
  }
  &--warning {
    background-color: #e6f7ff;
    .log-panel-item__left {
      background-color: #bae7ff;
    }
  }
  &--error {
    background-color: #fff1f0;
    .log-panel-item__left {
      background-color: #ffccc7;
    }
  }

  &__left {
    width: 40px;
    height: 40px;

    border-radius: 4px;
  }

  &__right {
    height: 40px;
    margin-left: 12px;
    &--name {
      height: 14px;
      line-height: 14px;
      font-size: 14px;
      color: #808080;
    }
    &--total {
      height: 18px;
      line-height: 22px;
      font-size: 18px;
      color: #404040;
      font-weight: 700;
    }
  }
}
</style>
